<template>
  <div class="carpcontain">
    <div class="carpaction">
      <div style="display: flex;align-items: center">
        <div>
          <el-date-picker
              v-model="datevalue"
              type="date"
              placeholder="选择日期"
              :disabled-date="disabledate"
              @change="GetXexamlist"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
          >
          </el-date-picker>
        </div>
        <div style="float: left;opacity: 0.6;font-size: 14px">
          注：学员仅可预约
          <span style="background-color: #00ce00;color: white;padding: 1px 4px;font-weight: 600">可预约</span> 状态的考试</div>
      </div>
      <div style="margin-right: 5px;font-weight: 600">总场地数：{{ num }}</div>
    </div>
    <div class="carpcard">
      <el-empty description="暂无考试信息" v-show="isempty"/>
      <div v-for="(item,index) in examlist" :key="index" v-show="!isempty">
        <div class="_carpcard">
          <div class="card-info">
            <div class="card-avatar">{{ item.subject }}</div>
            <div class="card-title">
              <div>编号：<span style="padding: 1px 4px;font-weight: 600">{{item.id}}</span></div>
              <div>地点：{{item.place}}</div>
              <div>剩余可预约人数：{{item.peoplelimit-item.peoplecurrent}}</div>
              <div>开始时间：{{item.date}}</div>
              <div v-if="msgtype === '已预约'">
                状态：
                <span style="background-color: #4fa0ff;padding: 1px 4px;font-weight: 600">我的预约</span>
              </div>
              <div v-else-if="item.peoplelimit-item.peoplecurrent>0">
                状态：
                <span style="background-color: #00ce00;padding: 1px 4px;font-weight: 600">可预约</span>
              </div>
              <div v-else>
                状态：
                <span style="background-color: #ff7474;padding: 1px 4px;font-weight: 600">已满</span>
              </div>
            </div>
          </div>
          <ul class="card-social">
            <li class="card-social__item" v-if="msgtype !== '已预约'">
              <button class="carpbut" @click="examorder(item.id,item.peoplecurrent,(item.peoplelimit-item.peoplecurrent))">
                预约
              </button>
            </li>
          </ul>
        </div>
      </div>
      <div style="position: absolute;bottom: -20px;height: 40px" >
        <el-pagination
            v-model:currentPage="currentPage1"
            :page-size="pagesize"
            background
            layout="total, prev, pager, next"
            :total="num"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
  <Dialog v-model="centerDialogVisible" :initplaceid="initplaceid" :initmyid="initmyid" :refPlace="refPlace"/>
</template>

<script setup>
import {ref} from "vue";
import Dialog from '@/components/add/Aorderpractise'
import {useStore} from "vuex";
import {ElMessage} from "element-plus";
import {getAllExam, getExam1234, getExamByLoginId, UpdateExam} from "@/api/exam";
import {InsertExanResult} from "@/api/exam_result";
const store = useStore()
const LoginI = store.getters.Id

// 获取当前时间
const UpData=(myday)=>{
  const nowDate = new Date();
  const targetday = nowDate.getTime() + 1000 * 60 * 60 * 24 * myday
  nowDate.setTime(targetday)
  const date = {
    year: nowDate.getFullYear(),
    month: nowDate.getMonth() + 1,
    date: nowDate.getDate(),
  }
  const newmonth = date.month>10?date.month:'0'+date.month
  const day = date.date>10?date.date:'0'+date.date
  return  date.year + '-' + newmonth + '-' + day
}
const datevalue = ref(UpData(0))
//禁用日期
const disabledate = (date) =>{
  return new Date(date).getTime() < new Date(UpData(-1)).getTime()
}

//初始化
const centerDialogVisible = ref(false)
const examlist = ref({})
const msgtype = ref('')

const currentPage1 = ref(1)
const pagesize = ref(6)
const num = ref(0)

const isempty = ref(false)

//弹窗数据
const initplaceid = ref(null)
const initmyid = ref(null)


//可预约的所有的考试
const refPlace = async () =>{
  await getExamByLoginId({pageNum:currentPage1.value,pageSize:pagesize.value,id:LoginI,date:datevalue.value}).then(res=>{
    if (res.code === 20041){
      msgtype.value = res.msg
      examlist.value = res.data.list
      num.value = res.data.total
      isempty.value = false
    }else {
      examlist.value = res.data.list
      num.value = res.data.total
      isempty.value = true
    }
  })
}
refPlace()

//根据日期查询
const GetXexamlist = () => {
  refPlace()
}

//考试预约
const examorder = async (id,num,isnum) =>{
  if (isnum === '0'){
    ElMessage.warning('考场已满')
  }else {
    await InsertExanResult({userId:LoginI,examId:id}).then(res=>{
      if (res.code === 20011){
        UpdateExam({id: id,peoplecurrent:(parseInt(num)+1)}).then(re=>{
          if (re.code === 20031){

          }else {
            ElMessage({
              message: '预约成功,修改预约人数失败',
              type: 'warning',
            })
          }
          refPlace()
        })
        ElMessage({
          message: '预约成功',
          type: 'success',
        })
      }else {
        ElMessage({
          message: '预约失败',
          type: 'error',
        })
      }
    })
  }
}


//分页器
const handleCurrentChange = () =>{
  refPlace()
}

</script>

<style scoped>
/**{*/
/*  border: 1px solid blue;*/
/*}*/

.CBDH{
  width: 60px;
  height: 240px;
  position: fixed;
  top: 50%;
  left: 50px;
  transform: translate(0,-50%);
}
.CBDH>ul{
  height: 100%;
  list-style-type: none;
}
.CBDH>ul>li{
  height: 60px;
  display: flex;
  font-weight: 600;
  align-items: center;
  justify-content: center;
  user-select: none;
  border: 1px solid #dadada;
}
.CBDH>ul>li:hover{
  transform: scale(1.04);
}
.CBDH>ul>li:active{
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
  transform: scale(0.96);
}
.carpcontain{
  flex: 1;
  margin: 0;
  padding: 10px 10%;
  height: auto;
  overflow: scroll;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  background-color: white;
}
.carpaction{
  height: 70px;
  display: flex;
  padding: 10px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e4e7ed;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
}
.carpcard{
  flex: 1;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  border: 1px solid #e4e7ed;
  box-shadow: 0 12px 12px rgba(0, 0, 0, 0.12);

}
.carpcard>div{
  width: 20vw;
  min-width: 330px;
  height: 200px;
  margin: 10px;
  box-sizing: border-box;
}

/* From uiverse.io by @alexruix */
._carpcard{
  width: 100%;
  height: 100%;
  border: 1px solid #e4e7ed;
  background-color: #ffffff;
  padding: 10px;
  overflow: hidden;
  transition: box-shadow .3s ease, transform .2s ease;
}

.card-info {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  transition: all .2s ease;
}

/*Image*/
.card-avatar {
  --size: 60px;
  background: linear-gradient(to top, #f1e1c1 0%, #fcbc97 100%);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  transition: transform .2s ease;
  margin-bottom: 1rem;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;

}


/*Card footer*/
.card-social {
  transform: translateY(200%);
  display: flex;
  justify-content: space-around;
  width: 100%;
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
}

.card-social__item {
  list-style: none;
}

.card-social__item svg {
  display: block;
  height: 18px;
  width: 18px;
  fill: #515F65;
  cursor: pointer;
  transition: fill 0.2s ease ,transform 0.2s ease;
}

/*Text*/
.card-title {
  color: #333;
  flex: 1;
  font-weight: 400;
  line-height: 2rem;
}
.card-title span{
  color: #ffffff;
  border: 1px solid #cacaff;
  background-color: #73b7ff;
  border-radius: 2px;
  padding: 2px;
}


/*Hover*/
._carpcard:hover {
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
}

._carpcard:hover .card-info {
  height: 80%;
  transform: translateY(-5%);
}

._carpcard:hover .card-social {
  transform: translateY(0);
  opacity: 1;
}

.card-social__item svg:hover {
  fill: #232323;
  transform: scale(1.1);
}

.card-avatar:hover {
  transform: scale(1.1);
}

/* From uiverse.io by @arieshiphop */
.carpbut{
  font-size: 17px;
  padding: 0.5em 2em;
  border: transparent;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
  background: dodgerblue;
  color: white;
  border-radius: 4px;
}

.carpbut:hover {
  background: rgb(2,0,36);
  background: linear-gradient(90deg, rgba(30,144,255,1) 0%, rgba(0,212,255,1) 100%);
}

.carpbut:active {
  transform: translate(0em, 0.2em);
}


/* From uiverse.io by @WhiteNervosa */
.carebut {
  font-size: 18px;
  color: #505050;
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
  position: relative;
  margin: 10px;
  background: none;
  text-transform: uppercase;
  border: none;
  border-right: 2px solid black;
  border-left: 2px solid black;
  box-sizing: border-box;
  padding: 0 5px;
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-duration: 400ms;
  transition-property: color;
}

.carebut:focus,
.carebut:hover {
  color: #000000;
}

.carebut:focus:after,
.carebut:hover:after {
  width: 100%;
  left: 0;
}

.carebut:after {
  content: "";
  pointer-events: none;
  bottom: -2px;
  left: 50%;
  position: absolute;
  width: 0;
  height: 2px;
  background-color: #000000;
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-duration: 400ms;
  transition-property: width, left;
}
</style>